import React, {Component} from "react";
import {View, TouchableOpacity, Alert, TextInput, StyleSheet, Dimensions, Modal, Text, Image} from "react-native";
import {ImageButton} from "../CustomButton";
import ClosableModal  from 'rn-closable-modal'

export default class GetCouponDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
            coupon_num: ''
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    closeModal=()=> {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
    }

    getMyCoupon() {
        if (this.state.coupon_num.length <= 0) {
            return
        }

        this.props.closeModal(false);
        this.props.callbackCoupon(this.state.coupon_num)
    }

    render() {


        return (
            <View style={{flex: 1}}>
                <ClosableModal
                    animationType='fade'
                    show={this.state.isVisible}
                    onClose={this.closeModal}
                    transparent={true}
                    >
                    <View style={styles.white_background}>
                        <ImageButton onPress={()=>{this.closeModal()}} style={{marginLeft:300,marginTop:15}}
                                     source={require('../../../res/img/dialog/icon_cancel.png')}/>
                        <View style={{justifyContent:'center',alignItems:'center',marginTop:-25}}>
                            <Text style={{fontSize:14,fontWeight:'bold',color:'black',marginTop:12}}>兑换优惠券</Text>
                            <View style={styles.text_input_view}>
                                <TextInput onEndEditing={()=>{
                            this._onpwdEndEditing()
                        }} secureTextEntry={this.state.secureTextEntry}
                                           onChangeText={(text)=>this.setState({coupon_num:text})} style={{padding:0,width:240}}
                                           placeholder='请输入兑换码' placeholderTextColor='rgba(0,0,0,0.3)'
                                           underlineColorAndroid='transparent'/>

                            </View>

                            <TouchableOpacity onPress={()=>{
                        this.getMyCoupon()
                    }}
                                              style={{justifyContent:'center',alignItems:'center',backgroundColor:'#DB3843',height:30,width:291,marginTop:15,borderRadius:15,}}>
                                <Text style={{color:'white',fontSize:13}}>兑换</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </ClosableModal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },

    white_background: {
        width: 331,
        height: 140,
        backgroundColor: 'white',
        borderRadius: 4,
    },
    text_input_view: {
        width: 291,
        height: 30,
        borderRadius: 15,
        borderWidth: 1,
        borderColor: '#DEDEDE',
        backgroundColor: 'white',
        paddingLeft: 20,
        paddingRight: 20,
        marginTop: 15,
        // justifyContent:'center',
        flexDirection: 'row',
    },
});
